<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ include file="/WEB-INF/common/tags.jsp"%>
<!DOCTYPE HTML>
<html>
<head>
<title>管理处信息</title>
<script type="text/javascript">
	$(function() {

		$('#branch').change(function() {
			checkInfoByStationId();
		});

		function checkInfoByStationId(elem) {
			//$.post(ctx + "/manager.htm?id="+$("#id").val());
			document.location = ctx + "/manager.htm?branchId="
					+ $("#branch").val();

		}

	});
</script>
<style type="text/css">
.top_bar {
	height: 40px;
	line-height: 40px;
	margin-left: 20px;
}

div.show1 {
	background-color: #FEFEFE;
	border: 1px solid #BfD6E1;
	border-radius: 5px;
	width: 70%;
	float: left;
	margin-bottom: 50px;
}

table.imagetable {
	font-family: verdana, arial, sans-serif;
	color: #333333;
	border-width: 1px;
	border-color: #999999;
	border-collapse: collapse;
	margin: auto;
}

table.imagetable tr th {
	width: 200px;
	heigth: 40px;
	padding: 7px;
	line-height: 40px;
	font-size: 18px;
	vertical-align: top;
}

table.imagetable tr td {
	width: 100px;
	heigth: 100px;
	padding: 7px;
	font-size: 18px;
	text-align: center;
}

table.imagetable tr td p {
	font-size: 18px;
}

div.show2 {
	padding: 5px;
	margin-top: 10px;
	width: 20%;
	margin-left: 20px;
	float: left;
}

div.loginBox {
	background-color: #FEFEFE;
	border: 1px solid #BfD6E1;
	margin-top: 100px;
	padding-left: 250px;
	padding-right: 180px;
	padding-bottom: 180px;
	padding-top: 50px;
	border-radius: 5px;
	margin: 0 auto;
	color: #444;
	font: 14px 'Microsoft YaHei', '微软雅黑';
	width: 650px;
}

div.loginBox span {
	font: 14px 'Microsoft YaHei', '微软雅黑';
	color: solid red;
}
</style>
</head>
<body>

	<div class="top_bar">
		<label class="label_s_width">管理处:</label>
		<!-- 	<script>alert("${branchId}")</script> -->
		<select name="branch" id="branch">
			<option value="">--请选择--</option>
			<c:forEach var="branch" items="${branches}" varStatus="s">
				<option value="${branch.id }"
					<c:if test="${branch.id==branchId}">selected="selected"</c:if>>${branch.name }</option>
			</c:forEach>

		</select>
	</div>

	<div class="show1" id="show1">

		<c:if test="${branchId==null}">
			<script>
				$("#show1").hide();
			</script>

		</c:if>

		<c:forEach var="road" items="${roads}" varStatus="vss">

			<table class="imagetable">


				<tr>

					<th>${road.name}<img id="pn_${road.name}"
						src="../resources/images/red.gif" /> <img id="vpn_${road.name}"
						src="../resources/images/red.gif" /> <c:forEach var="ds"
							items="${map[road.name]}">

							<c:if
								test="${ds.state==0 && (ds.toPnServerState ==0 || ds.toPnLocalState==0) }">
								<script>
									$("#pn_${road.name}").attr("src",
											"../resources/images/green.gif");
								</script>
							</c:if>

							<c:if test="${ ds.state==0 && ds.toVpnServerState ==0 }">
								<script>
									$("#vpn_${road.name}").attr("src",
											"../resources/images/green.gif");
								</script>
							</c:if>
						</c:forEach>


					</th>

				</tr>
			</table>
			<table class="imagetable">


				<tr>
					<c:forEach var="ds" items="${map[road.name]}" varStatus="vs">


						<c:if test="${vs.index %6 ==0}">
							<tr></tr>
						</c:if>
						<td>
							<p>${ds.name}</p> <c:if
								test="${ds.state==0 && (ds.toPnServerState ==0 || ds.toPnLocalState==0) }">
								<img src="../resources/images/green.gif" />
							</c:if> <c:if
								test="${ds.state==0 && (ds.toPnServerState ==1 || ds.toPnLocalState==1) && (ds.toPnServerState !=0 && ds.toPnLocalState!=0)  }">
								<img src="../resources/images/yellow.gif" />
							</c:if> <c:if
								test="${ds.state==0 && (ds.toPnServerState ==2 || ds.toPnLocalState==2) && (ds.toPnServerState !=0 && ds.toPnLocalState!=0) && (ds.toPnServerState !=1 && ds.toPnLocalState!=1)  }">
								<img src="../resources/images/red.gif" />
							</c:if> <c:if
								test="${ds.state==0 && ds.toPnServerState ==4 && ds.toPnLocalState ==4 }">
								<img src="../resources/images/oncheck.gif" />
							</c:if> <c:if test="${ds.state==0 && ds.toVpnServerState ==0 }">
								<img src="../resources/images/green.gif" />
							</c:if> <c:if test="${ds.state==0 && ds.toVpnServerState ==1 }">
								<img src="../resources/images/yellow.gif" />
							</c:if> <c:if test="${ds.state==0 && ds.toVpnServerState ==2 }">
								<img src="../resources/images/red.gif" />
							</c:if> <c:if test="${ds.state==0 && ds.toVpnServerState ==4 }">
								<img src="../resources/images/oncheck.gif" />
							</c:if> <c:if test="${ds.state==1  }">
								<img src="../resources/images/red.gif" />
								<img src="../resources/images/red.gif" />
							</c:if>
						</td>

					</c:forEach>

				</tr>
			</table>
			<c:if test="${!vss.last}">
				<hr color="#BfD6E1">
			</c:if>

		</c:forEach>
	</div>


	<div class="show2" rows="25" cols="40" id="show2">

		<c:if test="${branchId==null}">
			<script>
				$("#show2").hide();
			</script>



		</c:if>
		<h3 align="center">统计信息</h3>
		<br>
		<p>
			双网不通：
	        <c:set var="count" value="0" />
			<c:forEach var="road" items="${roads}">
			
				<c:forEach var="ds" items="${map[road.name]}">

					<c:if test="${ds.state==1}">
						
						<c:set var="count" value="${count+1}" /> 
	                    
	                </c:if>
					<c:if test="${ds.state==0 && ds.toPnServerState ==2 && ds.toPnLocalState ==2 && ds.toVpnServerState ==2 }">
						
						 <c:set var="count" value="${count+1}" /> 
	                    	                      
	                </c:if> 
	                  
				</c:forEach>
			 </c:forEach>
			 <b>  ${count} </b>   
			
		</p>
		<br>
		<p>
			专网不通：
			<c:set var="count" value="0" />
			<c:forEach var="road" items="${roads}">
				<c:forEach var="ds" items="${map[road.name]}">
					<c:if
						test="${ds.state==0 && ds.toPnServerState ==2 && ds.toPnLocalState ==2 }">                    
	                    	   <c:set var="count" value="${count+1}" />               
	                  </c:if>
				</c:forEach>
			</c:forEach>
			 <b>  ${count} </b>   
		</p>
		<br>
		<p>
			VPN不通：
			<c:set var="count" value="0" />
			<c:forEach var="road" items="${roads}">
				<c:forEach var="ds" items="${map[road.name]}">
					<c:if test="${ds.state==0 && ds.toVpnServerState ==2 }">                    
	                    	    <c:set var="count" value="${count+1}" />              
	                  </c:if>
				</c:forEach>
			</c:forEach>
			<b>  ${count} </b>   
		</p>
		<br> <br>


	</div>

	<div class="loginBox" id="loginBox">

		<c:if test="${branchId!=null}">
			<script>
				$("#loginBox").hide();
			</script>
		</c:if>

		<h1>管理处 --->路段--->收费站</h1>
		<br> <br>
		<h3>网络状态:</h3>
		<br> <img src="../resources/images/green.gif" /> &nbsp; <span><b>表示网络监听正常
		</b></span> <img src="../resources/images/red.gif" /> &nbsp;<span> <b>表示网络监听异常
		</b></span> <img src="../resources/images/yellow.gif" />&nbsp;<span> <b>表示网络延时较大
		</b></span> <img src="../resources/images/oncheck.gif" />&nbsp; <span><b>表示网络不检测</b></span><br>
	</div>


</body>
</html>
